<template>
  <!--  -->
  <div class="tank_status_count">
    <div class="EMULSION_style">EMULSION</div>
    <el-descriptions title="" :column="10" border>
      <el-descriptions-item
        label="空缸"
        label-align="center"
        align="center"
        label-class-name="item-empty"
        class-name="item-empty"
      >
        {{ empty }}
      </el-descriptions-item>
      <el-descriptions-item
        label="预混"
        label-align="center"
        align="center"
        label-class-name="item-premix"
        class-name="item-premix"
      >
        {{ premix }}
      </el-descriptions-item>
      <el-descriptions-item
        label="后混"
        label-align="center"
        align="center"
        label-class-name="item-aftermix"
        class-name="item-aftermix"
      >
        {{ aftermix }}
      </el-descriptions-item>
      <!--    <el-descriptions-item-->
      <!--        label="调色"-->
      <!--        label-align="center"-->
      <!--        align="center"-->
      <!--        label-class-name="item-tiaose"-->
      <!--        class-name="item-tiaose"-->
      <!--    >-->
      <!--      {{ tiaose }}-->
      <!--    </el-descriptions-item>-->
      <el-descriptions-item
        label="转缸"
        label-align="center"
        align="center"
        label-class-name="item-transfer"
        class-name="item-transfer"
      >
        {{ transfer }}
      </el-descriptions-item>
      <el-descriptions-item
        label="包装"
        label-align="center"
        align="center"
        label-class-name="item-pack"
        class-name="item-pack"
      >
        {{ pack }}
      </el-descriptions-item>

      <el-descriptions-item
        label="检验"
        label-align="center"
        align="center"
        label-class-name="item-qa"
        class-name="item-qa"
      >
        {{ qa }}
      </el-descriptions-item>
      <el-descriptions-item
        label="设备异常"
        label-align="center"
        align="center"
        label-class-name="item-yichang"
        class-name="item-yichang"
      >
        {{ yichang }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
const props = defineProps({
  empty: {
    type: Number,
    default: 0,
  },
  premix: {
    type: Number,
    default: 0,
  },
  aftermix: {
    type: Number,
    default: 0,
  },
  yichang: {
    type: Number,
    default: 0,
  },
  transfer: {
    type: Number,
    default: 0,
  },
  pack: {
    type: Number,
    default: 0,
  },
  qa: {
    type: Number,
    default: 0,
  },
});
</script>

<style scoped>
.EMULSION_style {
  background-color: #c6daec;
}
.tank_status_count {
  width: 100%;
  /* margin-top: 1%;
  margin-left: 3%; */
  /* border: 1px solid #666; */
  border-radius: 5px;
}
.el-descriptions__title {
  font-size: 30px;
}
.el-descriptions {
  background-color: #c6daec;
}
:deep(.item-empty) {
  background: #6495ed !important;
}
:deep(.item-premix) {
  background: #ffff00 !important;
}
:deep(.item-aftermix) {
  background: #ff8c00 !important;
}
:deep(.item-yichang) {
  background: #ff0000 !important;
}
:deep(.item-transfer) {
  background: #76eec6 !important;
}
:deep(.item-pack) {
  background: #79cdcd !important;
}
:deep(.item-qa) {
  background: #66cd00 !important;
}
</style>
